<template>
  <div v-show="props.compType === 'row'">
    <el-form-item label="响应式布局">
      <el-switch v-model="props.responsive" active-text="启用" inactive-text="禁用" />
    </el-form-item>

    <el-form-item label="栅格间隔">
      <el-input-number size="small" v-model="props.gutter" :min="0" :max="100" />
    </el-form-item>

    <template v-if="props.responsive">
      <el-divider>行响应式配置</el-divider>
      <div class="responsive-grid">
        <el-form-item label="XS (<768px)">
          <el-input-number v-model="props.rowResponsive.xs" :min="1" :max="24" />
        </el-form-item>
        <el-form-item label="SM (≥768px)">
          <el-input-number v-model="props.rowResponsive.sm" :min="1" :max="24" />
        </el-form-item>
        <el-form-item label="MD (≥992px)">
          <el-input-number v-model="props.rowResponsive.md" :min="1" :max="24" />
        </el-form-item>
        <el-form-item label="LG (≥1200px)">
          <el-input-number v-model="props.rowResponsive.lg" :min="1" :max="24" />
        </el-form-item>
        <el-form-item label="XL (≥1920px)">
          <el-input-number v-model="props.rowResponsive.xl" :min="1" :max="24" />
        </el-form-item>
      </div>
    </template>

    <el-divider>列配置项</el-divider>
    
    <el-collapse>
      <el-collapse-item 
        v-for="(item, index) in props.columns" 
        :key="index"
        :title="`列${index + 1}`"
      >
        <div class="select-item">          
          <template v-if="props.responsive">
            <el-form-item label="响应式">
              <el-switch v-model="item.responsive" />
            </el-form-item>
            
            <template v-if="item.responsive">
              <el-form-item label="XS" class="responsive-input">
                <el-input-number v-model="item.xs" :min="1" :max="24" />
              </el-form-item>
              <el-form-item label="SM" class="responsive-input">
                <el-input-number v-model="item.sm" :min="1" :max="24" />
              </el-form-item>
              <el-form-item label="MD" class="responsive-input">
                <el-input-number v-model="item.md" :min="1" :max="24" />
              </el-form-item>
              <el-form-item label="LG" class="responsive-input">
                <el-input-number v-model="item.lg" :min="1" :max="24" />
              </el-form-item>
              <el-form-item label="XL" class="responsive-input">
                <el-input-number v-model="item.xl" :min="1" :max="24" />
              </el-form-item>
              <!-- 其他断点可折叠 -->
            </template>
            <el-form-item v-else label="固定宽度">
              <el-input-number v-model="item.span" :min="1" :max="24" />
            </el-form-item>
          </template>
          <el-form-item v-else label="列宽">
            <el-input-number v-model="item.span" :min="1" :max="24" />
          </el-form-item>

          <div class="close-btn select-line-icon" @click.stop="removeColumn(index)">
            <el-icon><Remove /></el-icon>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <div style="margin-left: 30px; margin-top: 10px">
      <el-button
        icon="el-icon-circle-plus-outline"
        type="primary"
        link
        @click="handlerAddCol"
      >
        添加列
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop } from "web-decorator-vue";
import { Operation, Remove } from '@element-plus/icons-vue';

@Component({
  name: 'row-config',
  components: { Operation, Remove }
})
export default class RowConfig {
  @Prop() props: any;
  @Prop() getFormId: any;

  handlerAddCol() {
    const newIndex = this.props.columns.length;
    this.props.columns.push({
      index: newIndex,
      span: 12,
      responsive: this.props.responsive, // 继承全局设置
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 12,
      list: []
    });
  }

  removeColumn(index: number) {
    // 创建新数组替换原数组
    this.props.columns = [
      ...this.props.columns.slice(0, index),
      ...this.props.columns.slice(index + 1)
    ];
    
    // 使用Vue.set确保响应式
    this.props.columns.forEach((col, i) => {
      // this.$set(col, 'index', i);
      col.index = i
    });
  }
}
</script>

<style scoped>
.responsive-grid {
  /* display: grid;
  grid-template-columns: repeat(2, 1fr); */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.select-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.responsive-input {
  margin-bottom: 8px;
}

.close-btn {
  margin-left: auto;
  cursor: pointer;
  color: #f56c6c;
}
</style>